<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>

	html, body {
		height: 100%;
	}

	h1, h2, body {
		margin: 0;
		padding: 0;
	}

	/*.wp {
		width: 800px;
	}

	 .wp > div {
		float: left;
	}*/
	
	.left {
		/*width: 300px;*/
		display: -webkit-box;
		/*display: -moz-box;*/
		display: box;
		background-color: red;
		/*-webkit-box-flex: 1;
		box-flex: 1;*/
		-webkit-box-pack: center;
		/*box-pack: center;*/
		-webkit-box-align: center;
		/*box-align: center;*/
	}
	
	.center {
		/*width: 400px;*/
		background-color: green;
		-webkit-box-flex: 1;
		box-flex: 1;
	}
	
	.right {
		/*width: 200px;*/
		background-color: blue;
		/*-webkit-box-flex: 1;*/
		/*box-flex: 1;*/
	} 

	/* CSS3 box*/

	.wp {
		/*width: 800px;*/
		/*height: 500px;*/
		height: 100%;
		display: -webkit-box;
		display: box;
		/*box-orient: vertical;*/
		background-color: #ccc;
		/*-webkit-box-orient: horizontal;*/
		-webkit-box-orient: vertical;
	}
	</style>
</head>
<body>
	
	<div class="wp">
		<div class="left">
			<!-- left  -->
			<h1>left33333</h1>
			<!-- <ul>
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>
				<li>item4</li>
				<li>item5</li>
				<li>item6</li>
				<li>item7</li>
				<li>item8</li>
				<li>item9</li>
				<li>item10</li>
			</ul> -->
		</div>
		<div class="center">
			<h2>center</h2>
			<!-- <button></button>
			<button></button>
			<button></button>
			<button></button>
			<button></button>
			<button></button>
			<button></button>
			<button></button>
			<button></button>
			<button></button> -->
		</div>
		<div class="right">
			<h1>right</h1>
			<!-- <br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br> -->
		</div>
	</div>

</body>
</html>